<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 600px;
			margin: 100px auto;
		}
		.title span{
			float: left;
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		.title .active{
			background: orange;
			color: #FFF;
		}
		.content p{
			width: 600PX;
			height: 200px;
			line-height: 200px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
			/* 隐藏	*/
			display: none;
		}
		.content .act{
			/* 显示	*/
			display: block;
		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="title">
			<span class="active">标题一</span>
			<span>标题二</span>
			<span>标题三</span>
		</div>
			<div class="content">
				<p class="act">内容一</p >
				<p>内容二</p >
				<p>内容三</p >
			</div>
	</div>
	
	<script type="text/javascript">
		// 获取标签span
		var spans = document.querySelectorAll("span")
		var sp = document.querySelectorAll("p")

		// 用var var没有块级作用域，瞬间执行完for循环，i到达3，点击事件里的i只能取3
		for (let i = 0; i < spans.length; i++) {
			
			// 给每一个span造一个下标
			spans[i].index = i;
			// 给每个span标签添加一个点击事件
			spans[i].onclick = function(){

				// 先获取到原来有active类名的给他清空
				document.querySelector('.active').className = ''
				document.querySelector('.act').className = ''

				this.className = 'active'
				sp[i].className = 'act'
			}
		}
	</script>
</body>
</html>